<template>
  <div style="height:100vh;">
    <!-- 搜索框设置 -->
    <!-- <form action="/">
  <van-search width="350px"
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form> -->
<select-view></select-view>
  <div class="container">
    <!-- 遍历侧边栏分类列表 -->
    <div class="sidebar">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="m in fenlei"
          :key="m.cid"
          :title="m.category"
           @click="Shopp(m.category)"
        />
      </van-sidebar>
    </div>

    <!-- 遍历商品页面数据 -->
    <div class="list">
      <div class="food">
        <div class="small" @click="Article(n.lid)" v-for="n in data" :key="n.lid">
          <img :src="n.pic" alt="" />
          <br/>
          <span>{{ n.food }}</span>
        </div>
      </div>
    </div>
  </div>
  <my-footer></my-footer>
  </div>
</template>

<script>

import { Toast } from 'vant';
import MyFooter from '@/components/MyFooter.vue';
import SelectView from '@/components/SelectView.vue';
export default {
  components: { MyFooter, SelectView },
  data() {
    return {
      activeKey:"",
      fenlei: [],
      // data:[],
      value: '',
      data: [],
      xq:[]
    };
  },
  mounted() {
    this.getData();
    this.Shopp('cake')
  },
  methods: {
      
  
    // 发请求获得分类列表
    getData() {
      const url = `/category`;
      this.$axios
        .get(url)
        .then((res) => {
          this.fenlei = res.data.data;
        })
        .catch(function (error) {
          console.log("请求失败", error);
        });
    },

    // 点击侧边栏跳转到商品页面
    Shopp(category) {
      const url = `/list?category=${category}`;
      this.$axios
        .get(url)
        .then((res) => {
          console.log("获取蛋糕信息", res);
          this.data = res.data.data;
        })
        .catch(function (error) {
          console.log("请求失败", error);
        });
    },
     
    // Xq(){
    //   const url=`/lid?${this.data.list_id}`
    //   this.$axios.get(url).then((res)=>{
    //       console.log("获取信息",res)
    //       this.xq=res.data.data
    //       console.log(this.xq)
    //   })
    //   .catch(function(error){
    //     console.log('失败',error)
    //   })
    // },

    // 点击商品跳转详情页
    Article(lid){
      this.$router.push(`/article/${lid}`)
    },
    // 搜索框
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  margin: 10px;
  // flex-direction: row;
  width: 200px;
}
.list {
  margin: 5px;
}
img {
  width: 77px;
  height: 75px;
  margin: 0;
}
.food {
  display: flex;
  // flex-direction: row;
  flex-wrap: wrap;
  width: 280px;
}
span {
  font-size: 10px;
  word-break: normal;
 
}
.small {
  margin: 6px;
  text-align: center;
  width: 75px;
}
</style>